import React from 'react';
import { Layout, Card, Select, Statistic, List } from 'antd';
import ReactECharts from 'echarts-for-react';
import './Dashboard.css';
import { useNavigate, useLocation } from 'react-router-dom';

const { Header, Content, Sider } = Layout;

const lineOption = {
  title: { show: false },
  tooltip: {},
  legend: { data: ['A', 'B', 'C', 'D'] },
  xAxis: { data: ['00', '06', '12', '18', '24'] },
  yAxis: {},
  series: [
    { name: 'A', type: 'line', data: [120, 132, 101, 134, 90] },
    { name: 'B', type: 'line', data: [220, 182, 191, 234, 290] },
    { name: 'C', type: 'line', data: [150, 232, 201, 154, 190] },
    { name: 'D', type: 'line', data: [320, 332, 301, 334, 390] },
  ],
};
const barOption = {
  title: { show: false },
  xAxis: { type: 'category', data: ['2019', '2020', '2021', '2022', '2023'] },
  yAxis: { type: 'value' },
  series: [
    { data: [120, 200, 150, 80, 70], type: 'bar' },
  ],
};
const pieOption = {
  tooltip: { trigger: 'item' },
  legend: { top: '5%', left: 'center' },
  series: [
    {
      name: '占比',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: { show: false },
      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
      labelLine: { show: false },
      data: [
        { value: 1028, name: '已租房单位' },
        { value: 2232-1028, name: '空置房单位' },
      ],
    },
  ],
};
const carList = [
  { name: '苏A233JK', status: '进场', time: '09:16', color: 'green' },
  { name: '苏A233JK', status: '进场', time: '09:15', color: 'green' },
  { name: '苏A233JK', status: '进场', time: '09:14', color: 'green' },
  { name: '苏A233JK', status: '进场', time: '09:13', color: 'green' },
  { name: '苏A233JK', status: '进场', time: '09:12', color: 'green' },
  { name: '苏A233JK', status: '进场', time: '09:11', color: 'green' },
];

const menuItems = [
  { label: '综合态势', path: '/dashboard' },
  { label: '运营管理', path: '/dashboard/enterprise' },
  { label: '物业管理', path: '/dashboard/property' },
  { label: '数据治理', path: '/dashboard/visual' },
  { label: '能源管理', path: '/dashboard/energy' },
  { label: '园区卡口', path: '/dashboard/gate' },
];

const Dashboard = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [group, setGroup] = React.useState('超级开发组');

  const handleMenuClick = (item) => {
    navigate(item.path);
  };

  return (
    <Layout className="dashboard-root">
      <Header className="dashboard-header">
        <div className="dashboard-header-left">
          <span className="dashboard-title">智慧园区管理平台</span>
          <span style={{fontSize: 15, color: '#fff', marginLeft: 10}}>项目地址：</span>
          <Select value={group} className="dashboard-header-select" onChange={setGroup}>
            <Select.Option value="超级开发组">超级开发组</Select.Option>
            <Select.Option value="测试组">测试组</Select.Option>
            <Select.Option value="运维组">运维组</Select.Option>
          </Select>
        </div>
        <div className="dashboard-header-menu">
          {menuItems.map(item => (
            <span
              key={item.path}
              className={
                'dashboard-header-menu-item' +
                (location.pathname === item.path ? ' dashboard-header-menu-item-active' : '')
              }
              onClick={() => handleMenuClick(item)}
            >
              {item.label}
            </span>
          ))}
        </div>
        <div className="dashboard-header-right">
          <span className="dashboard-header-bell"><svg t="1712222222222" viewBox="0 0 1024 1024" width="20" height="20"><path d="M512 960c-53.024 0-96-42.976-96-96h192c0 53.024-42.976 96-96 96z m352-192h-704c-17.664 0-32-14.336-32-32 0-17.664 14.336-32 32-32h32v-256c0-176.736 143.264-320 320-320s320 143.264 320 320v256h32c17.664 0 32 14.336 32 32 0 17.664-14.336 32-32 32z" fill="#fff"/></svg></span>
          <span className="dashboard-header-user">name.lee</span>
          <span className="dashboard-header-time">2023/07/11 08:01:58</span>
        </div>
      </Header>
      <Layout>
        <Sider width={350} className="dashboard-sider">
          <Card title="当日能耗情况" className="dashboard-card">
            <ReactECharts option={lineOption} style={{ height: 180 }} />
          </Card>
          <Card title="企业数量概览" className="dashboard-card">
            <ReactECharts option={barOption} style={{ height: 180 }} />
          </Card>
          <Card title="服务统计" className="dashboard-card">
            <Statistic title="已处理" value={870} suffix="/ 1033" />
            <Statistic title="完成率" value={84.22} suffix="%" />
          </Card>
        </Sider>
        <Content className="dashboard-content">
          <div style={{width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
            <img src="/3d-building.png" alt="园区3D" className="dashboard-img" />
            <div className="dashboard-center-stats">
              <Card className="dashboard-center-stat-card" bordered={false}>
                <div className="dashboard-center-stat-title">园区总用电m²</div>
                <div className="dashboard-center-stat-value">7512</div>
              </Card>
              <Card className="dashboard-center-stat-card" bordered={false}>
                <div className="dashboard-center-stat-title">总租赁面积m²</div>
                <div className="dashboard-center-stat-value">6353</div>
              </Card>
              <Card className="dashboard-center-stat-card" bordered={false}>
                <div className="dashboard-center-stat-title">园区总产值/万元</div>
                <div className="dashboard-center-stat-value">75683</div>
              </Card>
              <Card className="dashboard-center-stat-card" bordered={false}>
                <div className="dashboard-center-stat-title">入驻企业数/家</div>
                <div className="dashboard-center-stat-value">274</div>
              </Card>
            </div>
            <div className="dashboard-center-bar">
              <ReactECharts
                option={{
                  color: ['#00cfff'],
                  tooltip: {},
                  grid: { left: 30, right: 20, bottom: 30, top: 30 },
                  xAxis: {
                    type: 'category',
                    data: ['软件', '互联网', '制造', '金融', '物流', '租赁', '其他'],
                    axisLabel: { color: '#fff' },
                    axisLine: { lineStyle: { color: '#00cfff' } },
                  },
                  yAxis: {
                    type: 'value',
                    axisLabel: { color: '#fff' },
                    splitLine: { lineStyle: { color: '#22335b' } },
                  },
                  series: [
                    {
                      data: [520, 430, 600, 300, 480, 350, 570],
                      type: 'bar',
                      barWidth: 30,
                    },
                  ],
                }}
                style={{ height: 180, width: 600 }}
              />
            </div>
          </div>
        </Content>
        <Sider width={350} className="dashboard-sider">
          <Card title="全区情况" className="dashboard-card">
            <Statistic title="园区总房单位" value={2232} />
            <Statistic title="已租房单位" value={1028} />
            <ReactECharts option={pieOption} style={{ height: 180 }} />
          </Card>
          <Card title="实时车辆信息" className="dashboard-card">
            <List
              dataSource={carList}
              renderItem={item => (
                <List.Item>
                  <span>{item.name}</span>
                  <span style={{ color: item.color, marginLeft: 10 }}>{item.status}</span>
                  <span style={{ marginLeft: 10 }}>{item.time}</span>
                </List.Item>
              )}
            />
          </Card>
        </Sider>
      </Layout>
    </Layout>
  );
};

export default Dashboard; 